<template>
  <div>
    <el-button class="abtn" type="primary" @click="dialogFormVisible=true;formData={}">添加</el-button>
    <el-input v-model="formData.eusername" placeholder="用户名" class="handle-input mr10"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="handleSearch(formData.eusername)">搜索</el-button>
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column fixed prop="eid" label="编号" />
      <el-table-column fixed prop="ename" label="姓名" />
      <el-table-column fixed prop="eusername" label="用户名" />
      <el-table-column fixed prop="phone" label="电话" width="108"/>
      <el-table-column fixed label="性别" >
        <template slot-scope="scope">
          {{ scope.row.sex == 1 ? "男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag>{{ scope.row.state == 1 ? '启用':'禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="角色" align="center">
        <template #default="scope">
          <el-tag>{{ scope.row.rid == 2 ? '员工':'管理员' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed prop="picture" label="头像"/>
      <el-table-column fixed prop="hiredate" label="入职时间"/>
      <el-table-column fixed prop="leavdate" label="离职时间"/>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-edit" @click="editInfo(scope.row)">编辑</el-button>
          <el-button type="text" size="small" icon="el-icon-delete" class="red" @click="remove(scope.row.eid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="编号" :label-width="formLabelWidth" >
          <el-input v-model="formData.eid" :disabled="true"/>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="formData.ename"/>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="formData.eusername"/>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="formData.epassword" show-password/>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="formData.phone"/>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="formData.sex">
            <el-radio label="男" value="1"/>
            <el-radio label="女" value="0"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="formData.state"/>
        </el-form-item>
        <el-form-item label="角色编号" :label-width="formLabelWidth">
          <el-input v-model="formData.rid"/>
        </el-form-item>
        <el-form-item label="入职日期" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker v-model="formData.hiredate" type="date" placeholder="选择入职日期"/>
          </div>
        </el-form-item>
        <el-form-item label="离职日期" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker v-model="formData.leavedate" type="date" placeholder="选择离职日期"/>
          </div>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submits()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'user',
  data () {
    return {
      list: [],
      title: '添加员工',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      formData: {}
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$http.get('http://localhost:8081/emp/list').then(data => {
        this.list = data
      })
    },
    handleSearch (eusername) {
      console.log(eusername)
      if (eusername === undefined || eusername === '') {
        this.$http.get('http://localhost:8081/emp/list').then(data => {
          this.list = data
        })
      } else {
        this.$http.get(`http://localhost:8081/emp/listWrapper?eusername=${eusername}`).then(data => {
          this.list = data
        })
      }
    },
    remove (eid) {
      alert(eid)
      this.$http.get(`http://localhost:8081/emp/remove?eid=${eid}`).then(data => {
        console.log(data)
        if (data) {
          this.$message.success('删除成功')
          this.getList()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    editInfo (rowInfo) {
      this.dialogFormVisible = true
      this.formData = rowInfo
      this.title = '修改信息'
    },
    submits () {
      if (this.formData.eid === undefined) {
        this.$http.get('http://localhost:8081/emp/save', {params: this.formData}).then(data => {
          console.log(data)
          if (data === true) {
            this.$message.success('添加成功')
            this.getList()
            this.dialogFormVisible = false
          } else {
            this.$message.error('添加失败')
            this.dialogFormVisible = false
          }
        })
      } else {
        this.$http.get('http://localhost:8081/emp/update', {params: this.formData}).then(data => {
          console.log(data)
          if (data === true) {
            this.$message.success('修改成功')
            this.getList()
            this.dialogFormVisible = false
          } else {
            this.$message.error('修改失败')
            this.dialogFormVisible = false
          }
        })
      }
    }
  }
}

</script>

<style scoped>
.red {
  color: #ff0000;
}
.abtn{
  float: left;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.mr10 {
  margin-right: 10px;
}
</style>
